import React, { Component } from 'react';
import { connect } from 'dva';
import { message, Modal, Pagination, Popconfirm, Button } from 'antd';
import styles from './../Users.css';
import moment from 'moment';
import Factory from '../../factory';
import * as datetime from '../../../utils/datetime'
import dataEditCreate from '../../addons/DataEdit'
import dataTableCreate from '../../addons/DataTable'
import * as menuService from '../../../services/menus';
import * as common from '../../../utils/common';

const daoName = "MinOper";
const ButtonGroup = Button.Group;
const columns = [
    { title: '序号', width: 80, sorter: true, dataIndex: 'ID', key: 'ID', dispaly: true, filter: false, export:true },
    { title: '交易日期', width: 80, sorter: true, key: 'TRTD', caption: "TRTD", render: data => datetime.format(data.TRTD, "yyyy-MM-dd"), dispaly: true, filter: false, export:true  },
    { title: '营业网点', width: 80, sorter: true, nowrap: true, key: 'OrganName', dispaly: true, filter: false, export:false },
    { title: '一级分类', width: 80, sorter: true, dataIndex: 'NTPM1', key: 'NTPM1', dispaly: true, filter: false, export:true },
    { title: '科目号', width: 100, sorter: true, dataIndex: 'ITNM', key: 'ITNM', dispaly: true, filter: false, export: true },
    { title: '科目', width: 110, sorter: true, dataIndex: 'ACNM', key: 'ACNM', dispaly: true, filter: false, export:false },
    { title: '收费名称', width: 155, sorter: true, nowrap: true, key: 'CHNM', dispaly: true, filter: false, export:true  },
    { title: '付款帐号', width: 155, sorter: true, dataIndex: 'ACNO', key: 'ACNO', dispaly: true, filter: false, export:false },
    { title: '付款户名', width: 200, sorter: true, nowrap: true, key: 'CUNM', dispaly: true, filter: false, export:false },
    { title: '收费总额', width: 80, sorter: true, dataIndex: 'HDCH', key: 'HDCH', dispaly: true, filter: false, export:true  },
    { title: '中间业务类型', width: 140, sorter: true, dataIndex: 'ITNM3', key: 'ITNM3', dispaly: true, filter: true },
    { title: '员工工号1', width: 110, sorter: true, dataIndex: 'KHJL1', key: 'KHJL1', dispaly: false, filter: false, export:true  },
    { title: '金额1', width: 110, sorter: true, dataIndex: 'JE1', key: 'JE1', dispaly: false, filter: false, export:true  },
    { title: '员工工号2', width: 110, sorter: true, dataIndex: 'KHJL2', key: 'KHJL2', dispaly: false, filter: false, export:true  },
    { title: '金额2', width: 110, sorter: true, dataIndex: 'JE2', key: 'JE2', dispaly: false, filter: false, export:true  },
    { title: '员工工号3', width: 110, sorter: true, dataIndex: 'KHJL3', key: 'KHJL3', dispaly: false, filter: false, export:true  },
    { title: '金额3', width: 110, sorter: true, dataIndex: 'JE3', key: 'JE3', dispaly: false, filter: false, export:true  },
    { title: '员工工号4', width: 110, sorter: true, dataIndex: 'KHJL4', key: 'KHJL4', dispaly: false, filter: false, export:true  },
    { title: '金额4', width: 110, sorter: true, dataIndex: 'JE4', key: 'JE4', dispaly: false, filter: false, export:true  },
    { title: '员工工号5', width: 110, sorter: true, dataIndex: 'KHJL5', key: 'KHJL5', dispaly: false, filter: false, export:true  },
    { title: '金额5', width: 110, sorter: true, dataIndex: 'JE5', key: 'JE5', dispaly: false, filter: false, export:true  },
    { title: '员工工号6', width: 110, sorter: true, dataIndex: 'KHJL6', key: 'KHJL6', dispaly: false, filter: false, export:true  },
    { title: '金额6', width: 110, sorter: true, dataIndex: 'JE6', key: 'JE6', dispaly: false, filter: false, export:true  },
    { title: '员工工号7', width: 110, sorter: true, dataIndex: 'KHJL7', key: 'KHJL7', dispaly: false, filter: false, export:true  },
    { title: '金额7', width: 110, sorter: true, dataIndex: 'JE7', key: 'JE7', dispaly: false, filter: false, export:true  },
];
const controls = [
    { name: "ID", required: true, type: 'name', label: '序号', grid: 12 / 24 },
    { name: 'TRTD', required: true, type: 'date', label: '交易日期', dataType: "date", min: 1, max: 50, grid: 12 / 24 },
    { name: 'OrganName', required: true, type: 'text', label: '营业网点', min: 1, max: 50, grid: 12 / 24 },
    { name: 'ITNM', required: true, type: 'text', label: '科目号', min: 1, max: 50, grid: 12 / 24 },
    { name: 'ACNM', required: true, type: 'text', label: '科目', min: 1, max: 50, grid: 12 / 24 },
    { name: 'NTPM1', required: true, type: 'text', label: '一级分类', min: 1, max: 50, grid: 12 / 24 },
    { name: 'CHNM', required: true, type: 'text', label: '收费名称', grid: 12 / 24 },
    { name: "ACNO", required: true, type: 'text', label: '付款帐号', min: 1, max: 50, grid: 12 / 24 },
    { name: "CUNM", required: true, type: 'number', label: '付款户名', dataType: "number", grid: 12 / 24 },
    { name: 'HDCH', required: true, type: 'text', label: '收费总额', min: 1, max: 50, grid: 12 / 24 },
    { name: 'ITNM3', required: true, type: 'text', label: '中间业务类型', min: 1, max: 50, grid: 12 / 24 },
];
const EditFrom = dataEditCreate(daoName);
const DataTable = dataTableCreate(daoName);
/*对公存款 */
class MinOperExportForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataChange: false
        };
    }
    componentDidMount() {
        this.props.dispatch({
            type: `${daoName}/setKeyName`,
            payload: { keyName: "ID", permID: this.props.permID }
        });
        this.props.dispatch({
            type: `${daoName}/fetch`,
            payload: { daoName, page: 1, pageSize: 20 }
        });
        this.loadOptionData();
    }
    loadOptionData() {
        let options = []
        controls.map(c => {
            if (c.fetch) {
                let f = c.fetch;
                if (c.type === 'cascader-select') {
                    f.isCascader = true;
                }
                if (c.type !== 'search') {
                    options.push(f);
                }
            }
        })
        if (daoName && options.length > 0) {
            this.props.dispatch({ type: `${daoName}/fetchOptions`, payload: { options } });
        }
    }
    findData() {
        let selectValues = '';
        let SDATE = '';
        let EDATE = '';
        const form = this.refs.MinForm.getForm();
        form.validateFields((err, values) => {
            if (!err) {
                selectValues = values.NTPN;
                SDATE = values.SDATE.get('year') + '-' + (values.SDATE.get('month') + 1) + '-' + values.SDATE.get('date')
                EDATE = values.EDATE.get('year') + '-' + (values.EDATE.get('month') + 1) + '-' + values.EDATE.get('date')
            }
        });
        if (selectValues === 'ALL') {
            selectValues = '0,1,2,3,4,5,6,7'
        }
        let seeks = [];
        let whereItems = [];
        let WhereCauses = [];
        whereItems.push({
            FieldName: "TRTD",
            Operator: ">=",
            FieldValues: SDATE
        });
        whereItems.push({
            FieldName: "TRTD",
            Operator: "<=",
            FieldValues: EDATE
        });
        whereItems.push({
            FieldName: "NTPN1",
            Operator: "in",
            FieldValues: selectValues
        })
        WhereCauses.push({
            WhereItems: whereItems,
            RelationSign: "AND"
        })
        seeks = WhereCauses;
        this.props.dispatch({
            type: `${daoName}/fetch`,
            payload: { daoName, seeks }
        });
    };
    ExportMin(key) {  
        //获取导出的查询条件
        let selectValues = '';
        let SDATE = '';
        let EDATE = '';
        const MinForm = this.refs.MinForm.getForm();
        MinForm.validateFields((err, values) => {
            if (!err) {
                selectValues = values.NTPN;
                SDATE = values.SDATE.get('year') + '-' + (values.SDATE.get('month') + 1) + '-' + values.SDATE.get('date')
                EDATE = values.EDATE.get('year') + '-' + (values.EDATE.get('month') + 1) + '-' + values.EDATE.get('date')
            }
        });
        if(SDATE === "" && EDATE===""){
                return;
        }
        if (selectValues === 'ALL') {
            selectValues = '0,1,2,3,4,5,6,7'
        }
        let seeks = [];
        let whereItems = [];
        let filters = [];
        whereItems.push({
            FieldName: "TRTD",
            Operator: ">=",
            FieldValues: SDATE
        });
        whereItems.push({
            FieldName: "TRTD",
            Operator: "<=",
            FieldValues: EDATE
        });
        whereItems.push({
            FieldName: "NTPN1",
            Operator: "in",
            FieldValues: selectValues
        })
        const whereCauses = [];
        whereCauses.push({
            WhereItems: whereItems,
            RelationSign: "AND"
        })  
        //获取导出的列  
        let columnHeaders = []
        columns.map((c, j) => {
            if(!c.export){
                return
            }
            let name=''
            if (key==="3"){
                if (selectValues==='5'){
                    name=c.title.replace('员工工号','客户证件号码')
                }else{
                    name=c.title.replace('员工工号','客户姓名')
                }
            }else{
                name=c.title
            }
            let header = {
                Name: c.key,
                Caption: name,
                Width: c.width
            }
            columnHeaders.push(header)
        })
        let form = document.createElement('form');//定义一个form表单
        const orderItems = []
        form.style = "display:none";
        form.target = "_blank";
        form.method = "post";
        form.action = "/api/ExportXlsx/" + daoName;
        let input1 = document.createElement("input");
        input1.type = "hidden";
        input1.name = "WhereCauses";
        input1.value = JSON.stringify(whereCauses);
        let input2 = document.createElement("input");
        input2.type = "hidden";
        input2.name = "OrderItems";
        input2.value = JSON.stringify(orderItems)
        let input3 = document.createElement("input");
        input3.type = "hidden";
        input3.name = "ColumnHeaders";
        input3.value = JSON.stringify(columnHeaders);
        let input4 = document.createElement("input");
        input4.type = "hidden";
        input4.name = "PermID";
        input4.value = "" + this.props.permID;
        let input5 = document.createElement("input");
        input5.type = "hidden";
        input5.name = "UserID";
        input5.value = "" + this.props.userID;
        document.body.appendChild(form);//将表单放置在web中
        form.appendChild(input1);
        form.appendChild(input2);
        form.appendChild(input3);
        form.appendChild(input4);
        form.appendChild(input5);
        form.submit();
        document.body.removeChild(form)
    }
    render() {
        let { showEdit, record, permID, userID } = this.props;
        const controlsCx = [
            { name: 'SDATE', required: true, type: 'date', label: '开始日期', grid: 6 / 24, layout: { labelSpan: 8, wrapperSpan: 16 }, dataType: "date" },
            { name: 'EDATE', required: true, type: 'date', label: '结束日期', grid: 6 / 24, layout: { labelSpan: 8, wrapperSpan: 16 }, dataType: "date" },
            { name: 'NTPN', required: false, type: 'select', label: '业务类别', grid: 4 / 24, data: [{ value: 'ALL', label: '全部' }, { value: '1', label: '公司类' }, { value: '2', label: '国际类' }, { value: '3', label: '零售类' }, { value: '4', label: '其他类' }, { value: '5', label: '同业类' }, { value: '7', label: '投行类' }], layout: { labelSpan: 12, wrapperSpan: 12 } },
            { name: 'button', required: false, type: 'button-group', grid: 7 / 24, data: [{ value: '1', label: '查询', onClick: this.findData.bind(this) }, { value: '2', label: '员工导出', onClick: this.ExportMin.bind(this,'2') }, { value: '3', label: '客户导出', onClick: this.ExportMin.bind(this,'3') }], layout: { labelSpan: 8, wrapperSpan: 16 } },
        ]
        return (
            <div className={styles.normal} style={{ background: '#fff', marginTop: -16, padding: '5px 5px' }}>
                <div>
                    <div className={styles.create}>
                        <EditFrom ref="MinForm" daoName={daoName} controls={controlsCx} record={{ NTPN: 'ALL' }} clearItemMargin={true} />
                    </div>
                    <DataTable ref="MinTable" daoName={daoName} columns={columns} controls={controls} permID={permID} canExport={false}/>
                </div>
            </div>
        )
    }
}
function mapStateToProps(state) {
    const { showEdit, record, selectedRowKeys, keyName } = state[daoName];
    const { userID } = state.menus
    return {
        showEdit,
        selectedRowKeys,
        keyName,
        record,
        userID
    }
}
MinOperExportForm = connect(mapStateToProps)(MinOperExportForm)
export default MinOperExportForm;
let render = (props) => React.createElement(MinOperExportForm, props);
let f = new Factory()
f.set("MinOperExportForm", render)